<template>
  <Modal title="编辑巡店设置"  :width="600" v-model="model" :styles="styles">
    <Form :model="form" :label-width="100" ref="form" :rules="ruleValidate">
      <FormItem label="职能归类" prop="roleType">
        <RadioGroup v-model="form.roleType" @on-change="onSelectRoleType">
          <Radio disabled v-for="item in roleTypeList" :key="item.value" :label="item.value">{{item.desc}}</Radio>
        </RadioGroup>
      </FormItem>

      <FormItem label="角色列表" prop="roles">
        <CheckboxGroup v-model="form.roles">
          <Checkbox :label="child.value" v-for="child in roleList" :key="child.id">{{child.desc}}</Checkbox>
        </CheckboxGroup>
      </FormItem>

      <!-- <FormItem label="频率(自然月)" prop="frequency">
        <InputNumber v-model="form.frequency"></InputNumber> 个
      </FormItem> -->
      <ul class="box">
        <li class="flex-start">
          <div class="one">门店类型</div>
          <div class="two">巡店频率（*个自然月）</div>
        </li>
        <li class="flex-start" v-for="(item, key) of storeTypeList" :key="key">
          <div class="one">{{item.storeTypeName}}</div>
          <div class="two">
            <Select
              v-model="item.frequency"
              clearable
              @on-change="onSelectAreaList"
              >
              <Option v-for="item in item.rateList"
                :value="item.id" :key="item.id">{{ item.value }}
              </Option>
            </Select>
          </div>
        </li>
      </ul>
      <div class="font-red pt">提示： 需前一个巡店周期结束后最新设置的巡店频率才生效</div>
    </Form>
    <div slot="footer">
      <Button  size="large" type="text"  @click="onCancel">取消</Button>
      <Button type="primary" size="large"   @click="onDone">确认</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      model: false,
      styles: {
        height: '700px',
        overflow: 'auto'
      },
      form: {
        roleType: '',
        frequency: '',
        roles: []
      },
      ruleValidate: {
        roles: [
          { required: true, type: 'array', min: 1, message: '请选择角色列表', trigger: 'change' }
        ],
        roleType: [{ required: true, message: '请选择职能归类', trigger: 'blur' }],
        frequency: [{ required: true, message: '请输入巡店频率', trigger: 'blur', type: 'number' }]
      },
      roleTypeList: [],
      roleList: [],
      rateList: [{
        value: 1,
        id: 1
      }, {
        value: 2,
        id: 2
      }, {
        value: 3,
        id: 3
      }, {
        value: 4,
        id: 4
      }, {
        value: 5,
        id: 5
      }, {
        value: 6,
        id: 6
      }, {
        value: 7,
        id: 7
      }, {
        value: 8,
        id:8
      }, {
        value: 9,
        id: 9
      }, {
        value: 10,
        id: 10
      }, {
        value: 11,
        id: 11
      }, {
        value: 12,
        id: 12
      }],
      storeTypeList: []
    }
  },
  mounted() {
    this.getRoleTypeList()
  },
  methods: {
    open(row) {
      this.model = true
      this.id = row.id
      this.form.roleType = row.roleType.toString()
      this.form.frequency = Number(row.frequency)
      this.form.roles = row.roles.map(item => item.value.toString())
      this.getRoleList(row.roleType)
      this.getStoreType(row)
    },
    getStoreType(row) {
      // this.$ajaxGet(`/setting/salesman_inspection/find_by_id/${this.id}`).then(res => {
        let special = {
          value: '0无须巡店',
          id: 0
        }
        this.storeTypeList = row.inspectionStoreTypes.map(item => {
          let rateList = JSON.parse(JSON.stringify(this.rateList))
          if (!item.isSpecial) rateList.unshift(special)
          return {
            storeTypeId: item.storeTypeId,
            storeTypeName: item.storeTypeName,
            frequency: item.frequency,
            isSpecial: item.isSpecial,
            rateList: rateList
          }
        })
      // })
    },
    onCancel() {
      this.model = false
      this.$refs['form'].resetFields()
    },
    getRoleList (roleType) {
      const param = {
        roleType: roleType
      }
      this.$ajaxGet('/setting/salesman_inspection/role/options', param).then(res => {
        this.roleList = res
      })
    },
    onSelectRoleType (val) {
      this.form.roles = []
      this.getRoleList(val)
    },
    getRoleTypeList () {
      this.$ajaxGet('/setting/salesman_inspection/roleType/options').then(res => {
        this.roleTypeList = res
      })
    },
    onDone() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let param = this.form
          param.id = this.id
          let roles = []
          this.roleList.forEach(item => {
            this.form.roles.forEach(child => {
              if (child === item.value) {
                roles.push(item)
              }
            })
          })
          param.roles = roles
          param.inspectionStoreTypes = this.storeTypeList
          this.$jsonPost('/setting/salesman_inspection/modify', param).then(data => {
            this.$Notice.success({
              title: (this.id ? '编辑' : '新增') + '成功'
            })
            this.$emit('complete')
            this.model = false
          }).catch((res) => {
          })
        }
      })
    }
  },
  watch: {
    model (val) {
      if (!val) {
        this.id = ''
        this.roleList = []
        this.$refs['form'].resetFields()
      }
    }
  },
}
</script>

